<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1 {
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
        }

        .div1:hover {
            width: 200px;
            height: 200px;
            background-color: pink;
            transition: background-color 1s ease 0.1s,
                width 1s linear 0.1s, /*与宽度有关的变化会在1秒内过渡完*/
                height 1s ease-in-out 0.1s;
        }


        .transformDiv {
            width: 300px;
            height: 300px;
            position: absolute;
            font-size: 22px;
            color: white;
            background-color: brown;
            /* -webkit代表苹果的Safari浏览器及谷歌内核识别码 */
            -webkit-transition: background-color 1s ease 0.1s, width 1s linear 0.1s, height 1s ease-in-out 0.1s;
            /* -moz代表火狐内核识别码 */
            -moz-transition: background-color 1s ease 0.1s, width 1s linear 0.1s, height 1s ease-in-out 0.1s;
            /* -ms代表ie内核识别码 */
            -ms-transition: background-color 1s ease 0.1s, width 1s linear 0.1s, height 1s ease-in-out 0.1s;
            /* -o代表欧朋【opera】内核识别码 */
            -o-transition: background-color 1s ease 0.1s, width 1s linear 0.1s, height 1s ease-in-out 0.1s;
            transition: background-color 1s ease 0.1s, width 1s linear 0.1s, height 1s ease-in-out 0.1s;
            /* linear：线性过渡。             规定以相同的速度开始至结束的过渡效果。
               ease：平滑过渡。               规定慢速开始逐渐变快然后慢速结束的过渡效果。
               ease-in：逐渐加速。            规定以慢速度开始的过渡效果。
               ease-out：逐渐减速。           规定以慢速度结束的过渡效果。
               ease-in-out：先加速后减速。    规定以慢速开始至结束的过渡效果。 */
        }

        .transformDiv:hover {
            background-color: gray;
            width: 350px;
            height: 350px;
            /* transform:scale(2); */                /* 放大2倍 */
            /* transform: rotate(7deg); */           /* 旋转7° */
            /* transform: translate(10px, 20px); */  /*x轴平移10px, y轴平移20px*/
            /* transition: transform 2s; */          /*与缩放,旋转,平移等有关的变化会在2秒内过渡完*/
        }


        .effect-box {
            position: relative;
            display: inline-block;
            overflow: hidden;
            width: 250px;
            height: 158px;
            background: rgba(53, 172, 197, 1);
            cursor: pointer
        }

        .effect-box img {
            display: block;
            width: 100%;
            height: 100%;
            opacity: 1;
            opacity: 1;
            -webkit-transition: opacity .35s;
            transition: opacity .35s
        }

        .effect-box:hover img {
            opacity: .4
        }

        .effect-box .border-line2 {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            padding: 2em;
            font-size: 1.25em;
            color: #fff;
            text-transform: uppercase;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden
        }

        .effect-box .border-line2::after,
        .effect-box .border-line2::before {
            position: absolute;
            top: 30px;
            right: 30px;
            bottom: 30px;
            left: 30px;
            content: '';
            opacity: 0;
            pointer-events: none;
            -webkit-transition: opacity .35s, -webkit-transform .35s;
            transition: opacity .35s, transform .35s
        }

        .effect-box .border-line2::before {
            border-top: 1px solid #fff;
            border-bottom: 1px solid #fff;
            -webkit-transform: scale(0, 1);
            transform: scale(0, 1)
        }

        .effect-box .border-line2::after {
            border-right: 1px solid #fff;
            border-left: 1px solid #fff;
            -webkit-transform: scale(1, 0);
            transform: scale(1, 0)
        }

        .effect-box:hover .border-line2::after,

        .effect-box:hover .border-line2::before {
            opacity: 1;
            -webkit-transform: scale(1);
            transform: scale(1)
        }

        .effect-box .border-line2 p {
            padding: 4px 10px;
            margin: 0;
            font-size: 16px;
            line-height: 1.0;
            text-align: center;
            color: #fff;
            letter-spacing: 1px;
            opacity: 0;
            -webkit-transition: opacity .35s, -webkit-transform .35s;
            transition: opacity .35s, transform .35s;
            -webkit-transform: translate3d(0, 20px, 0);
            transform: translate3d(0, 20px, 0)
        }

        .effect-box:hover .border-line2 p {
            opacity: 1;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0)
        }


        @keyframes example{
            0%   {background-color: red;left:0px;top:0px}
            25%  {background-color: yellow;left:200px;top:0px}
            50%  {background-color: blue;left:200px;top:200px}
            75%  {background-color: green;left:0px;top:200px}
            100% {background-color: red;left:0px;top:0px}
        }
        .div{
            width: 100px;
            height: 100px;
            background: red;
            position: relative;
            animation-name: example;
            animation-duration: 4s;
            animation-iteration-count: infinite;
        }
    </style>
</head>

<body>
    <div class="div1">
        123
    </div>
    <div class="transformDiv">
        123
    </div>
    <div class="effect-box">
        <img src="https://img1.baidu.com/it/u=1965663592,580944689&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1712768400&t=d94bd610a39d120ccb972c09d167c06c">
        <div class="border-line2">

            <p> 319 </p>
            <p> 布局和界面</p>
            <p>Read More</p>

        </div>
    </div>
    </div>

    <h1>使用css动画</h1>
    <div class="div"></div>
</body>

</html>